<template>
  <div>
        <el-dialog v-model="visible" :title="title" width="50%">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" />
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="/api/common/upload"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="form.avatar" :src="'/api/common/download/'+form.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="届数" :label-width="formLabelWidth">
          <el-input v-model="form.edition" />
        </el-form-item>
        <el-form-item label="任职单位职务与职称" :label-width="formLabelWidth">
          <el-input v-model="form.unitPosition" />
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item label="工作单位" :label-width="formLabelWidth">
          <el-input v-model="form.workUnit" />
        </el-form-item>
        <el-form-item label="个人简介" :label-width="formLabelWidth">
          <el-input v-model="form.introduction" type="textarea" />
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remarks" type="textarea" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, defineEmits} from 'vue'
import {addAssociationCouncil, updateAssociationCouncil} from '../../../api/guild/associationCouncil'
import { ElMessage, ElMessageBox } from 'element-plus'
import {Plus} from "@element-plus/icons-vue";


const headers = {
  token: localStorage.getItem('token')
}

const visible = ref(false)
const title=ref('')
const formLabelWidth = '140px'
//定义触发器
let emit=defineEmits(['refresh'])

// 表单默认值
let defaultForm = {
  id: '',
  userName: '',
  avatar: '',
  edition: '',
  unitPosition: '',
  sort: '',
  workUnit: '',
  introduction: '',
  remarks: '',
  status: 1,
}
let form=ref(defaultForm)

defineExpose({
  add,
  edit,
})
//新增
function add(){
  //重置表单
  form.value = {...defaultForm}
  visible.value = true
  title.value='新增理事会成员'
}
//编辑
function edit(row){
  visible.value = true
  title.value='编辑理事会成员'
  form.value=row
}
//提交
async function submitForm(){
  try{
  await ElMessageBox.confirm(  
    '确定提交吗?',
    '重要提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )

  try{
    let formData=JSON.parse(JSON.stringify(form.value))
    let res
    //判断编辑还是新增
    if(formData.id){
      res = await updateAssociationCouncil(formData)
    }else{
      res =await addAssociationCouncil(formData)
    }
    ElMessage.success(res.data)
    visible.value = false
    emit('refresh')
  }catch(e){
    console.log(e);
    ElMessage.error()
  }
}catch(e){
    }
}

function handleAvatarSuccess(response,uploadFile){
  // console.log("response",response)
  form.value.avatar = response.data
}
</script>
<style  scoped>
.avatar{
  width: 178px;
  height: 178px;
  display: block;
}
</style>